<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0px;
        margin: 0px;
    }
</style>

<body>
    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
        import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 3000);
        camera.position.set(0, 0, 1);

        const renderer = new THREE.WebGLRenderer({
            antialias: true
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.render(scene, camera);
        document.body.appendChild(renderer.domElement);


        // const mesh = new THREE.Mesh(
        //     new THREE.BoxGeometry(5,5,5),
        //     new THREE.MeshBasicMaterial()
        // )

        // scene.add(mesh)

        const axesHelper = new THREE.AxesHelper(150);
        scene.add(axesHelper);

        const amibient = new THREE.AmbientLight(0xffffff);
        const directional = new THREE.DirectionalLight(0xffffff);
        directional.position.set(0, 3, 0);
        scene.add(amibient, directional);


        const list = [
            {
                size:{width:1.2,height:1.5},
                position: { x: 3, y: 0.5, z: -5.08 },
                path: './1.jpg',
                rotation:{
                    x:0,y:0,z:0
                }                
            },
            {
                size:{width:1.05,height:1.5},
                position: { x: 5, y: 0.5, z: -5.08 },
                path: './2.jpg',
                rotation:{
                    x:0,y:0,z:0
                }                
            },
            {
                size:{width:1.05,height:1.5},
                position: { x: 5, y: 0.5, z:5.08 },
                path: './3.jpg',
                rotation:{
                    x:0,y:Math.PI,z:0
                }
            },
            {
                size:{width:1.05,height:1.5},
                position: { x: 3, y: 0.5, z:5.08 },
                path: './4.jpg',
                rotation:{
                    x:0,y:Math.PI,z:0
                }
            },
            {
                size:{width:1.05,height:1.5},
                position: { x: -3, y: 0.5, z:5.08 },
                path: './5.jpg',
                rotation:{
                    x:0,y:Math.PI,z:0
                }
            },
            {
                size:{width:1.05,height:1.5},
                position: { x:-5, y: 0.5, z:5.08 },
                path: './6.jpg',
                rotation:{
                    x:0,y:Math.PI,z:0
                }
            },
            {
                size:{width:4,height:2},
                position: { x: -4.2, y: 0.5, z: -5.08 },
                path: './7.jpeg',
                rotation:{
                    x:0,y:0,z:0
                }                
            },                                                                        
        ]

        list.map(val => {
            const size = val.size;
            const position = val.position;
            const texture = new THREE.TextureLoader().load(val.path)
            const plane = new THREE.Mesh(
                new THREE.PlaneGeometry(size.width,size.height),
                new THREE.MeshBasicMaterial({
                    map: texture
                })
            )
            plane.position.set(position.x,position.y,position.z);
            Object.keys(val.rotation).map(key=>{
                plane.rotation[key]=val.rotation[key]
            })
            scene.add(plane);
        })







        const gltfLoader = new GLTFLoader();
        gltfLoader.load('/room1/msg.gltf', (gltf) => {
            console.log(gltf, 'gltf')
            gltf.scene.position.set(0, -1, 0);

            //gltf.scene.scale.set(2,2,2);

            scene.add(gltf.scene);

        })


        const controls = new OrbitControls(camera, renderer.domElement);

        controls.enableDamping = true;

        controls.addEventListener('change', () => {
            renderer.render(scene, camera)
        })

        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>

</html>